<template>
	<div class="divider" :class="[`divider-${position}`]" :data-text="text"></div>
</template>

<script>
export default {
	name: "divider",
	props: {
		text: {
			type: String,
			default: "",
		},
		position: {
			type: String,
			default: "left",
		},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
.divider {
	height: 1px;
	background: #ccc;
	margin: 25rpx 0;
	position: relative;
	&::before {
		content: attr(data-text);
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		padding: 0 10px;
		line-height: 20px;
	}
	&.divider-left {
		width: 100%;
		&::before {
			left: 35rpx;
			transform: none;
		}
	}
	&.divider-center {
		width: 100%;
		&::before {
			left: 50%;
			transform: translateX(-50%);
		}
	}
	&.divider-right {
		width: 100%;
		&::before {
			right: 40rpx;
			left: auto;
			transform: none;
		}
	}
}
</style>
